<template>
  <div>
    <h1>home组件 {{ changeColor }}</h1>

    <div>
      <input type="text" v-model.trim="name" />
      <input type="text" v-model.trim.number="price" />
      <button @click="addBooks">点击添加</button>

      <button @click="changeCurrentItem">修改</button>
    </div>
    <table border="1" width="800" height="600" cellspacing="0">
      <thead>
        <tr>
          <th>
            全选:
            <input
              type="checkbox"
              name=""
              id=""
              v-model="AllChecked"
              @click="selectAllChecked"
            />
          </th>
          <th>名字</th>
          <th>价格</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!--   , -->
        <tr
          v-for="(item, index) in list"
          :key="index"
          :class="[
            { current: item.checked },
            { blue: index % 2 == 0 },
            { green: index % 2 != 0 },
          ]"
        >
          <td>
            <input
              type="checkbox"
              name=""
              id=""
              v-model="item.checked"
              @change="currentSelectChecked(item.checked, index)"
            />
          </td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>{{ item.num }}</td>
          <td>
            <a href="#" @click.prevent="delItem(index)"> 删除</a>
            <a href="#" @click.prevent="changeItem(index)"> 修改</a>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">选中的数量: {{ checkedNum }}</td>

          <td colspan="3">总价格: {{ totalPrice }}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
let i = 0;
let list = [
  {
    checked: false,
    name: "web前端",
    price: 10000,
    num: 1,
  },
  {
    checked: true,
    name: "java",
    price: 15000,
    num: 1,
  },
  {
    checked: false,
    name: "python",
    price: 20000,
    num: 1,
  },
  {
    checked: false,
    name: "test",
    price: 8000,
    num: 2,
  },
];
export default {
  data() {
    return {
      name: "",
      price: "",
      list: [],
      AllChecked: false,
    };
  },

  created() {},
  mounted() {
    this.AllChecked = JSON.parse(localStorage.getItem("AllChecked")) || false;
    console.log(this.AllChecked);

    let getList = JSON.parse(window.localStorage.getItem("list")) || [];
    console.log(getList);
    if (getList.length > 0) {
      this.list = getList;
    } else {
      this.list = list;
    }
  },
  methods: {
    addBooks() {
      let obj = {
        checked: false,
        num: 1,
        name: this.name,
        price: this.price,
      };
      this.list.push(obj);
      localStorage.setItem("list", JSON.stringify(this.list));
      console.log(this.list);
      this.name = "";
      this.price = "";
    },
    delItem(index) {
      this.list.splice(index, 1);
      localStorage.setItem("list", JSON.stringify(this.list));
    },
    changeItem(index) {
      console.log(this.list[index]);
      let currentItem = this.list[index];
      this.name = currentItem.name;
      this.price = currentItem.price;
      i = index;
    },
    changeCurrentItem() {
      console.log(i);

      this.list.some((item, index) => {
        if (index == i) {
          item.name = this.name;
          item.price = this.price;
          return;
        }
      });
      this.name = "";
      this.price = "";
      localStorage.setItem("list", JSON.stringify(this.list));
    },
    //     changeSingleChecked() {

    //         if(!this.selectAllChecked) {
    //             this.list.map(item=> {
    //                 return  item.checked=false
    //             })
    //         }else {
    //             return item.checked=true
    //         }
    //     }

    currentSelectChecked(flag, i) {
      this.list[i].checked = flag;

      let currentFlag = this.list.every((item) => {
        if (!item.checked) return false;
        return true;
      });

      this.AllChecked = currentFlag;

      localStorage.setItem("AllChecked", this.AllChecked);

      localStorage.setItem("list", JSON.stringify(this.list));
    },
    //全选功能
    selectAllChecked() {
      this.AllChecked = !this.AllChecked;
      this.list.forEach((item) => {
        item.checked = this.AllChecked;
      });

      localStorage.setItem("list", JSON.stringify(this.list));
      localStorage.setItem("AllChecked", this.AllChecked);
    },
  },

  computed: {
    // checkedNum() {
    //   let add = 0;
    //   this.list.forEach((item) => {
    //     if (item.checked) {
    //       add++;
    //     }
    //   });
    //   return add;
    // },
    checkedNum() {
      return this.list.reduce((curVal, item) => {
        if (item.checked) {
          curVal++;
        } else {
          curVal;
        }
        return curVal;
      }, 0);
    },

    // totalPrice() {
    //      return this.list.reduce((curVal,item)=> {
    //          if(item.checked) {
    //           return  curVal+item.num*item.price
    //          }else {
    //             return curVal
    //         }

    //         // if(!item.checked)  return curVal
    //         // return  curVal+item.num*item.price
    //         //  return  !item.checked ?  curVal : curVal+item.num*item.price

    //      } ,0)
    // },
    totalPrice() {
      return this.list.reduce(
        (curVal, item) =>
          !item.checked ? curVal : curVal + item.num * item.price,
        0
      );
    },

    changeColor() {
      return this.list.map((item, index) => {
        if (index % 2 == 0) {
          return "blue";
        } else {
          return "green";
        }
      });
    },
  },
  watch: {
    list(newVal, oldVal) {
      console.log(newVal);
      let currentFlag = newVal.every((item) => {
        if (!item.checked) return false;
        return true;
      });

      this.AllChecked = currentFlag;

      localStorage.setItem("AllChecked", this.AllChecked);
    },
  },
};
</script>

<style scoped>
table {
  margin: 20px auto;
}
.blue {
  color: blue;
}
.green {
  color: green;
}

.current {
  background-color: pink;
}
</style>
